<div class="sign-error-modal">
    <div class="btn icon-close" w-modal-close></div>

    <div class="connect-mode" ng-if="$ctrl.mode === 'sign-error' && $ctrl.isLedger">
        <div class="sign-error-icon ledger-icons"></div>
        <h3 class="text-center basic-700" w-i18n="modal.sign.signError"></h3>
        <p class="body-2 basic-500 margin-3" w-i18n="modal.sign.signErrorText"></p>
        <div class="buttons-wrapper">
            <w-button class="big" w-modal-close>
                <span w-i18n="modal.sign.cancel"></span>
            </w-button>
            <w-button class="submit big" w-modal-hide>
                <span w-i18n="modal.sign.retry"></span>
            </w-button>
        </div>
    </div>

    <div class="connect-mode" ng-if="$ctrl.mode === 'load-user-error' && $ctrl.isLedger">
        <div class="sign-error-icon ledger-icons"></div>
        <h3 class="text-center basic-700" w-i18n="modal.sign.connectionError"></h3>
        <div class="title-wrapper margin-4 body-2 basic-500">
            <div class="text-center basic-500">
                <span w-i18n="modal.sign.signErrorText"></span>
            </div>
            <div class="text-center basic-500">
                <span w-i18n="modal.sign.referTo"></span>
                <a href="https://support.ledgerwallet.com/hc/en-us/articles/115005165269-Fix-connection-issues"
                   w-i18n="modal.sign.article" target="_blank" rel="noopener noreferrer"></a>
            </div>
        </div>
        <w-button class="submit big" w-modal-close>
            <span w-i18n="modal.sign.close"></span>
        </w-button>
    </div>

    <div class="connect-mode" ng-if="$ctrl.mode === 'sign-error' && $ctrl.isKeeper">
        <div class="sign-error-icon ledger-icons"></div>
        <h3 class="text-center basic-700" w-i18n="modal.sign.signErrorKeeper"></h3>
        <p class="body-2 basic-500 margin-3" w-i18n="modal.sign.signErrorTextKeeper"></p>
        <div class="buttons-wrapper">
            <w-button class="big" w-modal-close>
                <span w-i18n="modal.sign.cancel"></span>
            </w-button>
            <w-button class="submit big" w-modal-hide>
                <span w-i18n="modal.sign.retry"></span>
            </w-button>
        </div>
    </div>

    <div class="connect-mode" ng-if="$ctrl.mode === 'load-user-error' && $ctrl.isKeeper">
        <div class="sign-error-icon ledger-icons"></div>

        <h3 class="text-center basic-700" w-i18n="modal.sign.connectionErrorKeeper"></h3>
        <div class="title-wrapper margin-4 body-2 basic-500">
            <div class="text-center basic-500">
                <span w-i18n="modal.sign.signErrorTextImportKeeper" params="{address: $ctrl.userAddress}"></span>
            </div>
        </div>
        <w-button class="submit big half" w-modal-close>
            <span w-i18n="modal.sign.close"></span>
        </w-button>
    </div>

</div>
